<template>
    <div>
      <div :id="id" style="width: 100%; height: 100%"></div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts'
  export default {
      props:{
          id:{
              type:String,
              require:true
          },
          xdata:{
              type:Array,
              required:true
          },
          ydata:{
              type:Array,
              required:true
          }
      },
      mounted() {
          var chartDom = document.getElementById(this.id)
          var myChart = echarts.init(chartDom)
          var option
  
          option = {
              title:{
                  text:'近七日销售总量统计',
                  x:'center',
                  top:'20'
              },
          xAxis: {
              type: 'category',
              data: this.xdata
          },
          yAxis: {
              type: 'value'
          },
          series: [
              {
              data: this.ydata,
              type: 'bar',
              color:'#d9a7c7'
              }
          ]
          }
  
          option && myChart.setOption(option)
      }
  }
  </script>
  
  <style lang="scss" scoped>
  </style>